import React, { Component, createRef } from "react";
import PropTypes from "prop-types";
import { Form, Input } from "antd";
/**
 * 更新分类的form组件
 */
const Item = Form.Item;
export default class UpdateForm extends Component {
    constructor(props) {
        super(props);
        // 创建一个 ref
        this.formRef = createRef();
    }
    //限制props的类型
    static propsTypes = {
        categoryName: PropTypes.string.isRequired,
        setForm:PropTypes.func.isRequired
    };

   
    setValues = () => {
        const formInstance = this.formRef.current;
        const { categoryName } = this.props;
        if (formInstance) {
            
            formInstance.setFieldsValue({
                categoryName: categoryName
            });
        }
    }
    //放在update的里面更新form的表单的数据
    componentDidUpdate(){
        this.setValues()
    }
    componentDidMount(){
        const formInstance = this.formRef.current;
        if(formInstance){
            //将form对象通过setForm()传递父组件
          this.props.setForm(formInstance)  
        }
    }

    render() {
        const { categoryName } = this.props;
        return (
            <Form
                ref={this.formRef}
                name="updateForm"
                style={{ maxWidth: 360 }}
                initialValues={{
                    categoryName: categoryName,
                }}
            >
                <Item
                    label="分类名称"
                    name="categoryName"
                    rules={[
                        {
                            required: true,
                            message: "请输入分类的名称!",
                        },
                    ]}
                >
                    <Input placeholder="请输入分类的名称"></Input>
                </Item>
            </Form>
        );
    }
}
